<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向滚动</title>
    <style>
        .box{
            width: 100%;
            height: 304px;
            border: 2px solid #000;
            margin-top: 100px;
            overflow-x: scroll;
        }
        ul{
            width: 200%;
            height: 300px;
            /* 去掉 li标签的黑点。下面四行代码是固定搭配，才能去除黑点。 */
            text-decoration: none;
            list-style: none;
            padding: 0;
            margin: 0;
            /* list-style-type: none;  只能去除黑点，但是不能改变黑点所带来的样式变化。 */
        }
        ul li{
            width: 15.666%;
            height: 300px;
            margin: 0 0.5%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 这种横向滚动，一般用于移动端的某些内容的局部横向滚动。 -->
        <ul>
            <li style="background-color: rgb(234, 133, 133);"></li>
            <li style="background-color: rgb(217, 241, 167);"></li>
            <li style="background-color: rgb(141, 223, 122);"></li>
            <li style="background-color: rgb(122, 244, 251);"></li>
            <li style="background-color: rgb(117, 176, 232);"></li>
            <li style="background-color: rgb(220, 137, 248);"></li>
        </ul>
    </div>
</body>
</html>